<template>
	<div style="width: 500px;margin: 0 auto;">
		<h1 style="text-align: center;">登录</h1>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="用户名" prop="username">
		    <el-input v-model="ruleForm.username"></el-input>
		  </el-form-item>
		  <el-form-item label="密码" prop="password">
		    <el-input v-model="ruleForm.password" type="password"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
		    <el-button @click="reg">注册</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
	        ruleForm: {
	          username: '',
	          password: '',
	        },
	        rules: {
	          username: [
	            { required: true, message: '请输入用户名', trigger: 'blur' },
	            { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
	          ],
	          password: [
	            { required: true, message: '请输入密码', trigger: 'blur' },
	            { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
	          ],
	        }
	      };
	    },
	    methods: {
	      submitForm(formName) {
	        this.$refs[formName].validate((valid) => {
	          if (valid) { // 判断校验是否通过，true表示通过
	            //alert('校验通过，应该发送ajax进行登录!');
				this.$router.push("/index")
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
	      reg() {
	        this.$router.push("/reg")
	      }
	    }
	  }
</script>

<style>
</style>